<template>
	<div class="appDetails">
		<Card>
			<div class="title">
				详情
			</div>
			<div class="form">
				<label>名称：</label>
				<span>{{name}}</span>
			</div>
			<div class="form">
				<label>命名空间</label>
				<span>{{nameSpace}}</span>
			</div>
			<div class="form">
				<label>标签选择器：</label>
				<span>
					<div v-for="(item, index) in label" :key="index">
						{{item}}
					</div>
				</span>
			</div>
			<div class="form">
				<label>创建时间：</label>
				<span>{{date}}</span>
			</div>
			<div class="form">
				<label>类型：</label>
				<span>
					{{type}}
				</span>
			</div>
			<div class="form">
				<label>保持会话：</label>
				<span>{{sessionAffinity}}</span>
			</div>
			<div class="form">
				<label>连接</label>
			</div>
			<div class="form">
				<label>集群IP：</label>
				<span>{{ip}}</span>
			</div>
			<div class="form">
				<label>内部端点：</label>
				<span>
					<div v-for="(item, index) in node" :key="index">
						{{item}}
					</div>
				</span>
			</div>
		</Card>
		<!-- 端点 -->
		<Card class="myCard">
			<div class="title">
				端点
			</div>
			<Table :columns="columns" :data="tableData"></Table>
		</Card>
		<!-- 服务 -->
		<Card class="myCard">
			<div class="title">
				容器组
			</div>
			<Table :columns="columns1" :data="tableData1"></Table>
		</Card>
		<Modal v-model="logModal" title="日志" width="1000" footer-hide>
			<div class="app-log">
				<p>{{log}}</p>
			</div>
		</Modal>
	</div>
</template>

<script>
	import Util from '@/utils/index'
	export default {
		data () {
			return {
				// 名称
				name: '',
				// 命名空间
				nameSpace: '',
				// 标签
				label: '',
				// 注释
				// notes: '',
				// 时间
				date: '',
				// 类型
				type: '',
				// 保持会话
				sessionAffinity: '',
				// 集群ip
				ip: '',
				// 内部端点
				node: '',
				// label集合
				labelList: [],
				// 端口集合
				nodeList: '',
				// 是否就绪
				ready: '',
				columns: [
					{
						title: '主机',
						key: 'ip'
					},
					{
						title: '端口（名称、端口、协议）',
						key: 'metadata',
						render: (h, params) => {
							if (this.nodeList[0].name !== undefined) {
								return h('span', this.nodeList[0].name + ',' + this.nodeList[0].port + ',' + this.nodeList[0].protocol)
							} else {
								return h('span', '<unset>' + ',' + this.nodeList[0].port + ',' + this.nodeList[0].protocol)
							}
						}
					},
					{
						title: '节点',
						key: 'nodeName'
					},
					{
						title: '已就绪',
						key: '',
						render: (h, params) => {
							return h('span', this.ready)
						}
					}
				],
				tableData: [],
				columns1: [
					{
						title: '应用名称',
						key: 'metadata',
						width: '200px',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '应用分组',
						key: 'metadata',
						width: '120px',
						render: (h, params) => {
							return h('span', params.row.metadata.namespace)
						}
					},
					{
						title: '标签',
						key: 'metadata',
						render: (h, params) => {
							let str = ''
							for (var item in params.row.metadata.labels) {
								str += item + ':' + params.row.metadata.labels[item] + '\n'
							}
							return h('div', str)
						}
					},
					{
						title: '启动时间',
						key: 'metadata',
						width: '200px',
						render: (h, params) => {
							var date1 = new Date(params.row.metadata.creationTimestamp).toString().replace(/-/g, '/')
							var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
							return h('span', date2)
						}
					},
					{
						title: '集群IP',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.clusterIP)
						}
					},
					{
						title: '内部端点',
						key: 'spec',
						render: (h, params) => {
							if (params.row.metadata.namespace === 'default') {
								return h('span', params.row.metadata.name + ':' + params.row.spec.ports[0].port + ' ' + params.row.spec.ports[0].protocol)
							} else {
								return h('span', params.row.metadata.name + '.' + params.row.metadata.namespace + ':' + params.row.spec.ports[0].port + ' ' + params.row.spec.ports[0].protocol)
							}
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.$router.push({
												name: 'podDetails'
											})
											sessionStorage.name = params.row.metadata.name
											sessionStorage.nameSpace = params.row.metadata.namespace
										}
									}
								}, '查看详情'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									on: {
										click: () => {
											let myRow = params.row.metadata
											this.logModal = true
											this.$api.get(0, '/kuber/v2/k8s/metrics/log?nameSpace=' + myRow.namespace + '&name=' + myRow.name, {}, r => {
												if (r.data.code === 0) {
													this.log = r.data.data
												}
											})
										}
									}
								}, '查看日志')
							])
						}
					}
				],
				tableData1: [],
				logModal: false,
				log: ''
			}
		},
		methods: {
			getDetails () {
				this.$api.get(0, '/kuber/v2/k8s/apps?type=Service' + '&nameSpace=' + sessionStorage.nameSpace + '&name=' + sessionStorage.name, {}, r => {
					if (r.data.code === 0) {
						let myData = r.data.data
						// 名称
						this.name = myData.metadata.name
						// 命名空间
						this.nameSpace = myData.metadata.namespace
						this.label = []
						for (let key in myData.spec.selector) {
							this.label.push(key + ':' + myData.spec.selector[key])
						}
						// 注释
						// this.notes = myData.metadata.annotations
						// 时间
						this.date = Util.fommotDate(myData.metadata.creationTimestamp)
						// 类型
						this.type = myData.spec.type
						// 保持会话
						this.sessionAffinity = myData.spec.sessionAffinity
						// 集群ip
						this.ip = myData.spec.clusterIP
						// 内部端点
						this.node = []
						if (myData.metadata.namespace === 'default') {
							this.node.push(myData.metadata.name + ':' + myData.spec.ports[0].port + ' ' + myData.spec.ports[0].protocol)
							this.node.push(myData.metadata.name + ':' + myData.spec.ports[0].nodePort + ' ' + myData.spec.ports[0].protocol)
						} else {
							this.node.push(myData.metadata.name + '.' + myData.metadata.namespace + ':' + myData.spec.ports[0].port + ' ' + myData.spec.ports[0].protocol)
							this.node.push(myData.metadata.name + '.' + myData.metadata.namespace + ':' + myData.spec.ports[0].nodePort + ' ' + myData.spec.ports[0].protocol)
						}
						for (var item in myData.spec.selector) {
							this.labelList.push({'name': item, 'value': myData.spec.selector[item]})
						}
						this.getpointList()
						this.getPodList()
					}
				})
			},
			getpointList () {
				this.$api.get(0, '/kuber/v2/k8s/apps?type=Endpoints&nameSpace=' + this.nameSpace + '&name=' + this.name, {}, r => {
					if (r.data.code === 0) {
						if (r.data.data.subsets[0].addresses !== undefined) {
							this.tableData = r.data.data.subsets[0].addresses
							this.ready = 'true'
						} else {
							this.tableData = r.data.data.subsets[0].notReadyAddresses
							this.ready = 'false'
						}
						this.nodeList = r.data.data.subsets[0].ports
					}
				})
			},
			getPodList () {
				this.$api.get(0, '/kuber/v2/k8s/apps?type=Pod' + '&nameSpace=' + this.nameSpace + '&labelvalue=' + this.labelList[0].value + '&labelkey=' + this.labelList[0].name, {}, r => {
					if (r.data.code === 0) {
						this.tableData1 = r.data.data.items
					}
				})
			},
			// 跳往容器
			toPod (index) {
				let myList = []
				for (var item in index.metadata.labels) {
					myList.push({'name': item, 'value': index.metadata.labels[item]})
				}
				sessionStorage.nameSpace = index.metadata.namespace
				sessionStorage.labelkey = myList[0].name
				sessionStorage.labelvalue = myList[0].value
				this.$router.push({
					name: 'pod'
				})
			}
		},
		mounted () {
			this.getDetails()
		}
	}
</script>
